<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Multiple Language Timed Text Sample</title>
    <meta name="description" content="" />

    <link rel="stylesheet" href="../../contrib/akamai/controlbar/controlbar.css">
    <script src="../../contrib/akamai/controlbar/ControlBar.js"></script>
    <script src="../../dist/dash.all.debug.js"></script>
    <!--dash.all.min.js should be used in production over dash.all.debug.js
        Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
    <!--<script src="../../dist/dash.all.min.js"></script>-->

    <script class="code">
        var EXTERNAL_CAPTION_URL = "https://dash.akamaized.net/dash264/TestCases/4b/qualcomm/1/ED_OnDemand_5SecSeg_Subtitles.mpd", /* need to manually seek to get stream to start... issue with MPD but only sample with multi adaptations for external sidecar caption text xml */
            FRAGMENTED_CAPTION_URL = "https://vm2.dashif.org/dash/vod/testpic_2s/multi_subs.mpd",
            videoElement,
            controlbar,
            player;

        function init() {
            var TTMLRenderingDiv = document.querySelector("#ttml-rendering-div");
            videoElement = document.querySelector(".videoContainer video");
            player = dashjs.MediaPlayer().create();
            player.initialize(videoElement);
            player.attachTTMLRenderingDiv(TTMLRenderingDiv);
            player.on('currentTrackChanged', function(e) { 
                if (e.newMediaInfo.type === 'fragmentedText') {
                    setTimeout(showDomStorage, 0);
                }
            });
            controlbar = new ControlBar(player); /* Checkout ControlBar.js for more info on how to target/add text tracks to UI */
            controlbar.initialize();
            document.getElementById("lastMediaSettingsCachingInfoEnabled").checked = player.getSettings().streaming.lastMediaSettingsCachingInfo.enabled;
            showDomStorage();
        }

        function showDomStorage() {
            document.getElementById("domStorage").innerHTML = localStorage.getItem('dashjs_fragmentedText_settings');
        }

        function play() {
            var url = FRAGMENTED_CAPTION_URL;
            player.attachSource(url);
            setTextDefaultEnabled();
            setLang();
            player.play();
            showDomStorage();
        }

        function setTextDefaultEnabled() {
            var checkbox = document.getElementById("textDefaultEnabled");
            player.setTextDefaultEnabled(checkbox.checked);
        }

        function setLang() {
            var lang = document.getElementById("textSettings").value;
            var role = null;
            if (lang) {
                if (lang.indexOf('-') != -1) {
                    var values = lang.split('-');
                    lang = values[0];
                    role = values[1];
                }
                player.setInitialMediaSettingsFor('fragmentedText', { 
                    lang: lang,
                    role: role
                });
            }
        }

        function setLastMediaSettingsCachingInfoEnabled() {
            var checkbox = document.getElementById("lastMediaSettingsCachingInfoEnabled");
            player.updateSettings({
                streaming: {
                    lastMediaSettingsCachingInfo: { enabled: checkbox.checked }
                }
            })
        }

        function clearDomStorage() {
            localStorage.removeItem('dashjs_fragmentedText_settings');
            showDomStorage();
        }

    </script>

    <style>
        video {
            width: 100%;
        }

        .dash-video-player {
            width: 640px;
        }

        .settings {
            clear: both;
        }
        .settings>div {
            padding: 5px 0;
        }

        label {
            font-size: 1.1em;
        }

    </style>

    <body onload="init()">
        <div class="dash-video-player code">
            <div class="videoContainer" id="videoContainer">
                <video preload="auto"> </video>
                <div id="ttml-rendering-div"></div>

                <div id="videoController" class="video-controller unselectable">
                    <div id="playPauseBtn" class="btn-play-pause" title="Play/Pause">
                        <span id="iconPlayPause" class="icon-play"></span>
                    </div>
                    <span id="videoTime" class="time-display">00:00:00</span>
                    <div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" title="Fullscreen">
                        <span class="icon-fullscreen-enter"></span>
                    </div>
                    <div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List">
                        <span class="icon-bitrate"></span>
                    </div>
                    <input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01"/>
                    <div id="muteBtn" class="btn-mute control-icon-layout" title="Mute">
                        <span id="iconMute" class="icon-mute-off"></span>
                    </div>
                    <div id="trackSwitchBtn" class="control-icon-layout" title="A/V Tracks">
                        <span class="icon-tracks"></span>
                    </div>
                    <div id="captionBtn" class="btn-caption control-icon-layout" title="Closed Caption">
                        <span class="icon-caption"></span>
                    </div>
                    <span id="videoDuration" class="duration-display">00:00:00</span>
                    <div class="seekContainer">
                        <div id="seekbar" class="seekbar seekbar-complete">
                            <div id="seekbar-buffer" class="seekbar seekbar-buffer"></div>
                            <div id="seekbar-play" class="seekbar seekbar-play"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="settings">
                <div>
                    <button onclick="play()">play</button>
                </div>
                <div>
                    <input type="checkbox" id="textDefaultEnabled" onchange="setTextDefaultEnabled()" checked>
                    <label>textDefaultEnabled</label>
                </div>
                <div>
                    <label>initial settings Language/Role </label>
                    <select onchange="setLang()" id="textSettings">
                        <option value="">-- unset initial lang and role --</option>
                        <option value="eng-subtitle">eng - subtitles</option>
                        <option value="eng-caption">eng - captions</option>
                        <option value="swe">swe - subtitles</option>
                        <option value="qbb">qbb - subtitles</option>
                        <option value="nor">nor - subtitles</option>
                    </select>
                </div>
                <div>
                    <input type="checkbox" id="lastMediaSettingsCachingInfoEnabled" onchange="setLastMediaSettingsCachingInfoEnabled()"/>
                    <label>streaming.lastMediaSettingsCachingInfo.enabled</label>
                </div>
                <div>
                    <label>localStorage content</label>
                    <div id="domStorage"></div>
                    <button onclick="clearDomStorage()">Clear localStorage</button>
                </div>
            </div>
        </div>
        <script src="../highlighter.js"></script>
    </body>
</html>
